<template>
  <a-modal
    width="370px"
    v-drag
    :destroyOnClose="true"
    :maskClosable="false"
    :visible="visible"
    :zIndex="9999"
    :bodyStyle="{ padding: '1px' }"
    :title="title"
    @cancel="cancel"
  >
    <a-spin :spinning="tree.spinning">
      <a-input-search
        v-model="key"
        :allowClear="true"
        placeholder="请输入组织名称/拼音模糊搜索"
        @change="onSearch"
      />
      <a-directory-tree
        checkable
        v-if="!tree.spinning && tree.data.length > 0"
        :default-expand-all="true"
        :style="tree.style"
        :tree-data="tree.data"
        :defaultCheckedKeys="tree.checkedKeys"
        :checkedKeys="tree.checkedKeys"
        :checkStrictly="true"
        @check="onCheck"
      ></a-directory-tree>

      <a-empty
        :style="tree.style"
        v-if="tree.data.length == 0"
        description="无模块信息"
      />
    </a-spin>
    <template slot="footer">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </template>
  </a-modal>
</template>

<script>
import { chosenorganization } from "@/services/common/usercontrol/chosenorganization";
import XEUtils from "xe-utils";
import { pinyin } from "pinyin-pro";
export default {
  name: "eip-chosen-organization",
  data() {
    return {
      key: "",
      tree: {
        style: {
          overflow: "auto",
          height: "500px",
        },
        data: [],
        original: [],
        spinning: false,
        checkedKeys: [],
      },

      loading: false,
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    chosen: {
      type: Array,
    },
    //已选中对象,编辑传入
    range: {
      type: Number,
      default: 0,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.organizationInit();
  },
  methods: {
    onSearch(e) {
      var that = this;
      this.tree.data = XEUtils.clone(this.tree.original, true);
      this.tree.data = XEUtils.searchTree(
        this.tree.data,
        (item) => {
          var py = pinyin(item.title, {
            toneType: "none",
            type: "array",
          });
          var titlePinyin = "";
          py.forEach((item) => {
            titlePinyin += item.toLowerCase();
          });
          if (item.title.toLowerCase().indexOf(that.key.toLowerCase()) > -1) {
            return true;
          } else if (titlePinyin.indexOf(that.key.toLowerCase()) > -1) {
            return true;
          } else {
            return false;
          }
        },
        { children: "children" }
      );
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 初始化菜单
     */
    organizationInit() {
      let that = this;
      that.tree.spinning = true;
      chosenorganization(this.range).then((result) => {
        that.tree.original = result.data;
        that.tree.data = XEUtils.clone(result.data, true);
        if (that.chosen) {
          that.tree.checkedKeys = that.chosen.map((m) => m.id);
        }
        that.tree.spinning = false;
      });
    },

    /**
     * 选择
     */
    onCheck(checkedKeys, event) {
      this.tree.checkedKeys = [];
      checkedKeys.checked.forEach((item) => {
        this.tree.checkedKeys.push(item);
      });
    },

    /**
     * 保存
     */
    save() {
      let chosenOrganizations = [];
      let treeList = XEUtils.toTreeArray(this.tree.data);
      this.tree.checkedKeys.forEach((item) => {
        var organization = treeList.filter((f) => f.key == item);
        if (organization.length > 0) {
          chosenOrganizations.push(organization[0]);
        }
      });

      this.$emit("ok", chosenOrganizations);
      this.cancel();
    },
  },
};
</script>

<style lang="less" scoped></style>
